import React, { forwardRef, useState, useEffect } from 'react'
import './Disinfectionmanagement.scss'
// import style from './Animalmanagement.module.css'
import * as echarts from "echarts";
const Showinfo = forwardRef((props, ref) => {
    const [infodata, setdata] = useState([])
    const getdata = () => {
        // setdata(ref)

    }

    const drawbar = () => {
  
        let list = [
            {name:"荔枝霉疫霉病",value:88},
            {name:"荔枝炭疽病",value:75},
            {name:"荔枝蝽蟓",value:66},
            {name:"霜霉病",value:66},
            {name:"软腐病",value:66},
      ]
        var myChart = echarts.init(document.getElementById("barli"));
        var option = {
            backgroundColor: '#dbf1fd',
            title: {
                text: '荔枝树病患分布',
                textStyle: {
                    color: '#000',
                    fontSize: 25
                },
                top:"10%",
                left: 'center',
        // 		right: '5%'
            },
            grid: {
                // left: '12%',
                // top: '25%',
                // bottom: '30%',
                // right: '10%',
            },
            xAxis: {
                // name: 'X',
                nameTextStyle: {
                    color: '#333333',
                    padding: [0, 0, 0, 20],
                },
                show: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#7bb4dc',
                        shadowColor: 'rgba(91,100,134,1)',
                        shadowOffsetX: '20',
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 25],
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)',
                    },
                },
                axisLabel: {
                    show: true,
                    // rotate: -1,
                    textStyle: {
                        fontSize: 14,
                        // fontFamily: PangMenZhengDao,
                        fontWeight: 600,
                        color: '#000',
                    },
                },
                axisTick: {
                    show: false,
                },
        // 		data: ['物业纠纷', '其他合同', '道路交通']
                data: list.map(val => {
                    return val.name
                })
            },
            yAxis: [{
                nameTextStyle: {
                    color: '#333333',
                    padding: [0, 0, 0, 20],
                },
                max: 123,
                min: 0,
                splitNumber: (123 % 5).toFixed(0),
                show: true,
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 15],
                    lineStyle: {
                        // color: 'rgba(255, 129, 109, 0.1)',
                        width: 1, //这里是为了突出显示加上的
                        color: '#7bb4dc',
                        shadowColor: 'rgba(91,100,134,1)',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 12,
                        // fontFamily: PangMenZhengDao,
                        fontWeight: 600,
                        color: '#000'
                    },
                },
                splitArea: {
                    areaStyle: {
                        color: 'rgba(255,255,255,.5)',
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#cfe9f9',
                        width: 1,
                        type: 'solid',
                    },
                }
            }],
            series: [{
                type: 'pictorialBar',
                barCategoryGap: '-20%',
                /*多个并排柱子设置柱子之间的间距*/
                // symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                symbol: 'path://M0,10 L10,10 C5.5,10 6.5,5 5,5 C3.5,5 4.5,10 0,10 z',
                label: {
                    show: true,
                    position: 'top',
                    distance: 10,
                    color: '#000',
                    fontWeight: 'bolder',
                    fontSize: 12,
                },
                itemStyle: {
                    // normal: {
                    //   color: {
                    //     type: 'linear',
                    //     x: 0,
                    //     y: 0,
                    //     x2: 0,
                    //     y2: 1,
                    //     colorStops: [
                    //       {
                    //         offset: 0,
                    //         color: '#3b89f4',
                    //       },
                    //       {
                    //         offset: 1,
                    //         color: '#cce7fc',
                    //       },
                    //     ],
                    //     global: false, //  缺省为  false
                    //   },
                    // },
                    // emphasis: {
                    //   opacity: 1,
                    // },
                    normal: {
                        color: params => {
                            const colorList = [{
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                            offset: 0,
                                            color: '#297ff2',
                                        },
                                        {
                                            offset: 1,
                                            color: '#cce7fc',
                                        },
                                    ]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                            offset: 0,
                                            color: '#3bfafe',
                                        },
                                        {
                                            offset: 1,
                                            color: '#aaf4fe',
                                        },
                                    ]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                            offset: 0,
                                            color: '#3bfafe',
                                        },
                                        {
                                            offset: 1,
                                            color: '#aaf4fe',
                                        },
                                    ]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                            offset: 0,
                                            color: '#3bfafe',
                                        },
                                        {
                                            offset: 1,
                                            color: '#aaf4fe',
                                        },
                                    ]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                            offset: 0,
                                            color: '#e08440',
                                        },
                                        {
                                            offset: 1,
                                            color: '#decabd',
                                        },
                                    ]
                                }
                            ];
                            return colorList[params.dataIndex];
                        },
                        opacity: 0.7
                    },
                    // 鼠标移入柱子上 透明度变为 1
                    emphasis: {
                        opacity: 1,
                    },
                },
                data: list.map(v => {
                    return v.value
                })
                // data: [123, 60, 25]
            }, ],
    
        
        };
        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }
       
    }
    const drawbar2 = () => {
  
     
        var myChart = echarts.init(document.getElementById("barli2"));
        var option = {
     
            color: ["#315C94", "#497FB6", "#6F8FCF", "#7AA0BB", "#9FBEDD", "#BCD4E1"],
            backgroundColor: "#211b6a",
            textStyle: {
              color: "#fff",
            },
            title: {
                text: '2011-2016年全国荔枝产量排名',
                textStyle: {
                    color: '#000',
                    fontSize: 25
                },
                top:"0%",
                left: 'center',
        // 		right: '5%'
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  type: "dashed",
                  width: 2,
                  color: "#4B941A",
                },
                animation: true,
              },
            },
            legend: {
              show: false,
              data: ["2011", "2012", "2013", "2014", "2015", "2016"],
              left: "right",
            },
            grid: {
              show: false,
            },
            yAxis: {
              data: ["2011", "2012", "2013", "2014", "2015", "2016"],
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#555"],
                },
              },
              axisLine: {
                show: false,
              },
            },
            xAxis: {
              data: ["广东", "广西", "福建", "台湾", "浙江", "海南"],
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#555",
                },
              },
            },
            series: [
              {
                name: "2011年",
                type: "scatter",
                symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbolSize: function (data) {
                  return Math.sqrt(data[2]) * 1;
                },
                label: {
                  emphasis: {
                    show: true,
                    formatter: function (param) {
                      return param.data[2];
                    },
                    position: "top",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "red",
                  },
                },
                data: [
                  ["广东", "2011", 200],
                  ["广西", "2011", 1500],
                  ["福建", "2011", 2000],
                  ["台湾", "2011", 2500],
                  ["浙江", "2011", 3000],
                  ["海南", "2011", 3500],
                ],
              },
              {
                name: "2012年",
                type: "scatter",
                symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbolSize: function (data) {
                  return Math.sqrt(data[2]) * 1;
                },
                label: {
                  emphasis: {
                    show: true,
                    formatter: function (param) {
                      return param.data[2];
                    },
                    position: "top",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#C94C15",
                  },
                },
                data: [
                    ["广东", "2012", 2200],
                    ["广西", "2012", 500],
                    ["福建", "2012", 2000],
                    ["台湾", "2012", 500],
                    ["浙江", "2012", 300],
                    ["海南", "2012", 350],
                ],
              },
              {
                name: "2013年",
                type: "scatter",
                symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbolSize: function (data) {
                  return Math.sqrt(data[2]) * 1;
                },
                label: {
                  emphasis: {
                    show: true,
                    formatter: function (param) {
                      return param.data[2];
                    },
                    position: "top",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#A18F1D",
                  },
                },
                data: [
                    ["广东", "2013", 2000],
                    ["广西", "2013", 2500],
                    ["福建", "2013", 200],
                    ["台湾", "2013", 250],
                    ["浙江", "2013", 300],
                    ["海南", "2013", 300],
                ],
              },
              {
                name: "2014年",
                type: "scatter",
                symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbolSize: function (data) {
                  return Math.sqrt(data[2]) * 1;
                },
                label: {
                  emphasis: {
                    show: true,
                    formatter: function (param) {
                      return param.data[2];
                    },
                    position: "top",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#17885C",
                  },
                },
                data: [
                    ["广东", "2014", 2000],
                    ["广西", "2014", 2500],
                    ["福建", "2014", 1200],
                    ["台湾", "2014", 1250],
                    ["浙江", "2014", 1300],
                    ["海南", "2014", 1300],
                ],
              },
              {
                name: "2015年",
                type: "scatter",
                symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbolSize: function (data) {
                  return Math.sqrt(data[2]) * 1;
                },
                label: {
                  emphasis: {
                    show: true,
                    formatter: function (param) {
                      return param.data[2];
                    },
                    position: "top",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#2769CF",
                  },
                },
                data: [
                    ["广东", "2015", 2000],
                    ["广西", "2015", 2500],
                    ["福建", "2015", 1200],
                    ["台湾", "2015", 1250],
                    ["浙江", "2015", 1300],
                    ["海南", "2015", 1300],
                ],
              },
              {
                name: "2016年",
                type: "scatter",
                symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbolSize: function (data) {
                  return Math.sqrt(data[2]) * 1;
                },
                label: {
                  emphasis: {
                    show: true,
                    formatter: function (param) {
                      return param.data[2];
                    },
                    position: "top",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#509820",
                  },
                },
                data: [
                    ["广东", "2016", 4000],
                    ["广西", "2016", 4500],
                    ["福建", "2016", 2000],
                    ["台湾", "2016", 2050],
                    ["浙江", "2016", 3000],
                    ["海南", "2016", 3000],
                ],
              },
            ],
        
        };
        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }
       
    }

    useEffect(() => {
        drawbar()
        drawbar2()
        console.log(infodata);
        getdata()

    }, [])
    // console.log(ref);
    return (
        <div className='showli'>
            {/* {drawlist()} */}
            <div id='barli'></div>
            <div id='barli2'></div>
        </div>
    )
})

export default Showinfo